<template>
    <div id="the1">
        <div class="md-header-fixed">
            <header class="md-header">
                <div class="logo"><img src="../assets/images/logo.png"></div>

                <div class="search" id="logoHeadSearch">
                    <router-link to="/search" class="url1">我的猫咖</router-link>
                    <router-link to="/search" class="url2">我的猫咖</router-link>
                </div>
                <div class="login" id="user_login">
                    <div class="before">
                        <router-link to="/user" class="user"></router-link>

                    </div>

                </div>
            </header>
            <nav class="md-nav">
                <router-link to="/home" class="cur">推荐</router-link>
                <router-link to="/new">最新</router-link>
                <router-link to="/rank">排行</router-link>
                <router-link to="/class">找游戏</router-link>


            </nav>
        </div>
        <a href="/GameDetails?id=209474" class="daily-gamesend">
            <img src="//imga1.4399.cn/upload_pic/2022/11/5/4399_10013278636.jpg" alt="">
            <em class="tag" style="background-color:#f64242">今日推荐</em>
            <div class="game-intr">
                <h5>傲笑江湖</h5>
                <p>周年庆典，新侠客送好礼！</p>
            </div>
        </a>
        <div class="main-wrap">
            <div class="md-category cf">
                <router-link :to="'./gameCont?id=' + item.id" v-for=" (item, index) in this.container "
                    :key="'ifo-' + index">
                    <img :src="item.img">
                    <span>{{ item.name }}</span>
                </router-link>

                <router-link to="/collection">
                    <img src="https://h.4399.com/images/2022/sort-hj.png">
                    <span>游戏合辑</span>
                </router-link>


            </div>
            <!-- 最近在玩 -->
            <div class="md-played cf" id="played" style="" v-show="genShin">
                <div class="tit-tag">最近在玩</div>
                <div class="played-scroll">
                    <ul id="hisgame">
                        <li v-for=" (item, index) in this.qc " :key="index">
                            <router-link :to="'/GameDetails?id=' + item.id" >
                                <img :src="item.pic">
                                {{item.title}}
                            </router-link>
                           
                        </li>


                    </ul>
                    <router-link to="/paly"  class="more-played" v-show="imgPpt">
                        <div>
                            <img :src="item.pic"  v-for=" (item, index) in this.qc.slice(0, 4) " :key="index">
                            </div>更多
                    </router-link>
                  
                </div>
            </div>
            <!-- 游戏列表 -->
            <div class="md-list">
                <ul>
                    <li v-for=" (item, index) in con && con.slice(0, 5) " :key="index">
                        <router-link :to="'./GameDetails?id=' + item.id">

                            <img :src="item.pic">
                            <em>{{ item.title }}</em>
                            <p>{{ item.html5introduce }}</p>
                            <i></i>
                        </router-link>
                        <router-link :to="'/start?id=' + item.id" class="btn">开始玩</router-link>
                    </li>

                </ul>
            </div>
            <!-- 大图 -->
            <div class="md-newtj">
                <router-link to="/GameDetails?id=209474" class="tj-banner">
                    <img src="//imga1.4399.cn/upload_pic/2022/11/4/4399_17025149704.png">
                    <em class="tag" style="background-color:#61bb12">最新推荐</em>
                    <div class="game-intr">
                        <h5>笑傲江湖</h5>
                        <p>大大脑洞，其乐无穷！</p>
                    </div>
                </router-link>
                <div class="other-tj cf">
                    <ul>
                        <li v-for=" (item, index) in bad && bad.slice(0, 5) " :key="'ifo-' + index">
                            <router-link :to="'./GameDetails?id=' + item.id">

                                <img :src="item.pic">

                            </router-link>
                            <em>{{ item.title }}</em>
                        </li>

                    </ul>
                </div>
            </div>
            <!-- 网游 -->
            <div class="md-gamebox">
                <div class="hd">
                    <router-link to="/rank" class="title">
                        热门网游
                    </router-link>

                    <router-link to="/rank" class="more">
                        更多
                    </router-link>

                </div>
                <div class="bd cf">
                    <ul>
                        <li v-for=" (item, index) in con && con.slice(6, 18) " :key="'ifo-' + index">
                            <router-link :to="'./GameDetails?id=' + item.id">

                                <img :src="item.pic">

                                <i></i>
                            </router-link>
                            <em>{{ item.title }}</em>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 活动 -->

            <div class="md-card4">
                <div class="hd">
                    <span class="title">热门活动</span>
                </div>
                <div class="md-card4list cf">
                    <a><img src="//imga1.4399.cn/upload_pic/2022/10/27/4399_16052269466.jpg"></a>
                    <a><img src="//imga1.4399.cn/upload_pic/2022/10/31/4399_14054254393.jpg"></a>
                    <a><img src="//imga1.4399.cn/upload_pic/2022/10/31/4399_14054278250.jpg"></a>
                    <a><img src="//imga1.4399.cn/upload_pic/2022/8/3/4399_14405512130.jpg"></a>
                </div>
            </div>

            <!-- 女生 -->
            <div class="md-gamebox">
                <div class="hd">
                    <router-link :to="'./gameCo?id=' + this.getGirl.id" class="title">
                        {{ this.getGirl && this.getGirl.title }}
                    </router-link>
                    <router-link :to="'./gameCo?id=' + this.getGirl.id" class="more">
                        更多
                    </router-link>

                </div>
                <div class="bd cf">
                    <ul>
                        <li v-for=" (item, index) in girl && girl.slice(0, 4) " :key="'ifo-' + index">
                            <router-link :to="'./GameDetails?id=' + item.id">
                                <img :src="item.pic">
                                <i></i>
                            </router-link>
                            <em>{{ item.title }}</em>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 手残 -->
            <div class="md-gamebox">

                <div class="hd">
                    <router-link :to="'./gameCo?id=' + this.getGood.id" class="title">
                        {{ this.getGood && this.getGood.title }}
                    </router-link>
                    <router-link :to="'./gameCo?id=' + this.getGood.id" class="more">
                        更多
                    </router-link>
                </div>
                <div class="bd cf">
                    <ul>
                        <li v-for=" (item, index) in good && good.slice(0, 4) " :key="'ifo-' + index">
                            <router-link :to="'./GameDetails?id=' + item.id">
                                <img :src="item.pic">

                                <i></i>
                            </router-link>
                            <em>{{ item.title }}</em>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 益智游戏 -->
            <div class="md-gamebox">
                <div class="hd">
                    <router-link :to="'./gameCo?id=' + this.getPuzzle.id" class="title">
                        {{ this.getPuzzle && this.getPuzzle.title }}
                    </router-link>
                    <router-link :to="'./gameCo?id=' + this.getPuzzle.id" class="more">
                        更多
                    </router-link>

                </div>
                <div class="bd cf">
                    <ul>
                        <li v-for=" (item, index) in puzzle && puzzle.slice(0, 4) " :key="'ifo-' + index">
                            <router-link :to="'./GameDetails?id=' + item.id">


                                <img :src="item.pic">

                                <i></i>
                            </router-link>
                            <em>{{ item.title }}</em>
                        </li>
                    </ul>
                </div>
            </div>


        </div>

        <div class="loadmore" id="loading">
            <p><span>没有更多游戏了</span></p>
        </div>

    </div>
</template>
  
<script>
import { getHomepage, getHome, getGame, getGirl, getGood, getPuzzle } from '@/api/home';
// import { Sticky } from 'vant';
export default {
    data() {
        return {
            phone: '',
            password: '',
            code: '',
            indexSwiper: 0,
            container: null,
            con: null,
            coco: null,
            bad: null,
            girl: null,
            getGirl: [],
            getGood: [],
            good: null,
            getPuzzle: [],
            puzzle: null,
            gmaePaly: [],
            genShin: true,
            imgPpt:false
        };
    },
    methods: {
        addPale(item) {
            this.$store.commit("palyFun", item);
        },

        onChange(index) {
            this.indexSwiper = index;
        },
    },
    mounted() {

        getHomepage().then(data => {
            this.container = data.img



        })
        getHome().then(data => {
            this.con = data.data



        })
        getGame().then(data => {
            this.bad = data.data



        })
        getGirl().then(data => {
            this.getGirl = data
            this.girl = data.data



        })
        getGood().then(data => {
            this.getGood = data
            this.good = data.data


        })
        getPuzzle().then(data => {
            this.getPuzzle = data
            this.puzzle = data.data


        })
    },
    created() {
        this.gmaePaly = this.$store.state.bookLookLists
        const map = new Map()

        this.qc = this.gmaePaly.filter(key => !map.has(key.id) && map.set(key.id, 1)) // 这里对name属性进行去重

        console.log("qc", this.qc);
        if (this.qc.length == 0) {
            this.genShin = false
        } else {
            this.genShin = true
        }
        if (this.qc.length >=6){
            this.imgPpt=true
        }else{
            this.imgPpt=false

        }
    }

}
</script>
  
<style lang="scss" scoped>
.loadmore p span {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -60px;
    display: block;
    width: 120px;
    background: #fff;
}

// .loadmore p::before {
//     display: block;
//     position: absolute;
//     top: 16px;
//     left: 50%;
//     width: 250px;
//     margin-left: -125px;
//     height: 1px;
//     background-image: linear-gradient(to right, #f1f1f1 0%, #d7d7d7 50%, #f1f1f1 100%);
//     content: "";
// }

.loadmore p {
    text-align: center;
    color: #959595;
    font-size: 14px;
    position: relative;
    height: 32px;
}

.loadmore {
    height: 32px;
    line-height: 32px;
    background: #fff;
    text-align: center;
}

.loadmore {
    height: 32px;
    line-height: 32px;
    text-align: center;
    margin: 20px 0;
    color: #b4b3b3;
}


.md-card4 .md-card4list a img {
    width: 100%;
    border-radius: 10px;
}

.md-card4 .md-card4list a {
    margin-top: 12px;
}

.md-card a,
.md-card4 .md-card4list a {
    width: 48%;
    float: left;
    box-sizing: border-box;
}

.md-card4list a:nth-child(even) {
    float: right;
}

.md-card4 .hd .title {
    color: #333333;
    font-weight: bold;
    font-size: 16px;
    float: left;
    height: 20px;
    line-height: 20px;
}

.md-card4 .hd {
    overflow: hidden;
}

.md-card4 {
    margin: 30px 0;
}

.other-tj li {
    width: 62px;
    height: 70px;
    margin: 0 0 10px;
    box-sizing: border-box;
}


.md-gamebox li:nth-child(4n) {
    margin-right: 0;
}

.md-gamebox li img {
    width: 62px;
    height: 62px;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}

.md-gamebox li em {
    line-height: 1.4;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
}

.md-gamebox li a {
    display: block;
    width: 62px;
    height: 62px;
    position: relative;
    margin: 0 auto;
}

.md-gamebox li {
    float: left;
    width: 62px;
    margin-top: 10px;
    text-align: left;
    margin-right: 35.5px;
    position: relative;
}

.md-gamebox ul {
    display: flex;
    flex-wrap: wrap;
}

.md-gamebox .hd .more,
.md-card4 .hd .more {
    float: right;
    font-size: 13px;
    color: #959595;
    margin-top: 5px;
    height: 15px;
    line-height: 15px;
    padding-right: 10px;
    background: url("https://h.4399.com/images/2022/arrow.png") no-repeat right -0.5px;
    background-size: 9px 14px;
}

.md-gamebox .hd .title {
    color: #333333;
    font-weight: bold;
    font-size: 16px;
    float: left;
    height: 20px;
    line-height: 20px;
}


.md-gamebox .hd {
    overflow: hidden;
}

.md-gamebox {
    width: 100%;
}

.md-gamebox {
    margin-bottom: 30px;
}

.other-tj li img {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
}

.other-tj li em {
    line-height: 28px;
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

.other-tj li a {
    position: relative;
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
}

.other-tj li {
    width: 62px;
    height: 70px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.other-tj ul {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
}

.md-newtj .other-tj {
    border-radius: 10px;
    background-color: #fff;
    padding: 12.5px 0 0;
    box-shadow: 0 2px 4px #dedede;
    margin-top: -27.5px;
    z-index: 2;
    position: relative;
}

.md-newtj .tj-banner::after {
    content: '';
    background: url("https://h.4399.com/images/2022/dark_mask2.png") repeat-x;
    background-size: 50px 200px;
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 100px;
}

.tj-banner .game-intr p {
    color: #f1f1f1;
}

.tj-banner .game-intr h5 {
    font-size: 18px;
    margin-bottom: 4px;
}

.md-newtj .tj-banner .game-intr {
    padding: 0 10px;
    bottom: 35px;
    left: 0;
    color: #fff;
    position: absolute;
    z-index: 2;
}

.md-newtj .tj-banner .tag {
    height: 21px;
    line-height: 21px;
    background-color: #61bb12;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
    border-radius: 7.5px 0 7.5px 0;
}

.md-newtj .tj-banner {
    width: 100%;
    height: 177.5px;
    display: block;
    position: relative;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.md-newtj .tj-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.md-newtj {
    margin: 30px auto;
}

::-webkit-scrollbar {
    width: 0 !important;
}

::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
}

.more-played div img {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 1.5px;
    vertical-align: middle;
    border-radius: 2.5px;
}

.more-played div {
    width: 50px;
    height: 50px;
    background-color: #f0f0f0;
    border-radius: .50px;
    font-size: 0;
    padding: 2px;
    margin: 0 auto;
    white-space: normal;
    line-height: 22px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

.more-played {
    width: 62px;
    height: 72px;
    text-align: center;
    line-height: 28px;
    display: inline-block;
    margin: 0 .50px;
    overflow: hidden;
    font-size: 12px;
}


.md-played ul li a img {
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 10px;
    margin: 0 auto;
}

.md-played ul li a {
    display: block;
    overflow: hidden;
    line-height: 28px;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    text-align: center;
    word-break: break-all;
}

.md-played ul li {
    display: inline-block;
    width: 62px;
    margin: 0 .50px;
}

.md-played ul {
    display: inline-block;
}

.played-scroll {
    overflow-x: auto;
    white-space: nowrap;
    font-size: 0;
    overflow-y: hidden;
    height: 72px;
}

.md-played .tit-tag {
    width: 15px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    left: 7.5px;
    top: 10px;
    color: #333;
    line-height: 18px;
}

.md-played {
    padding: 10px 0 10px 30px;
    position: relative;
    box-shadow: 0 0 10px #dedede;
    border-radius: 10px;
    margin: 15px auto 30px;
}

.md-category {
    border-radius: 10px 10px 0 0;
    display: flex;
    background-color: #fff;
    padding-top: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.md-category a {
    width: 20%;
    height: 65px;
    padding-top: 0;
    background: none;
    float: left;
    text-align: center;
    line-height: 26px;
    font-size: 13px;
    margin-bottom: 15px;
}

.md-category img {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    display: block;
}

.md-category span {
    display: block;
    height: 26px;
    line-height: 26px;
}

.main-wrap {
    margin: -30px 10px 0;
    position: relative;
    z-index: 2;
}

body {
    font-size: 12px;

}

.daily-gamesend {
    width: 100%;
    height: 5rem;
    position: relative;
    display: block;
    z-index: 1;
}

.daily-gamesend::before {
    content: '';
    background: url("../assets/images/dark_mask.png") repeat-x;
    background-size: 50px 200px;
    width: 100%;
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 100%;
    height: 200px;

}

.daily-gamesend img {
    width: 100%;
    display: block;
    height: 100%;
    object-fit: cover;
}

.daily-gamesend .tag {
    padding: 0 9px;
    background-color: #f64242;
    line-height: 21px;
    height: 21px;
    color: #fff;
    border-radius: 0.18rem 0.18rem 0.18rem 0.05rem;
    text-align: center;
    position: absolute;
    top: 0.14rem;
    left: 0.2rem;
}

em,
i {
    font-style: normal;
    vertical-align: top;
}

.daily-gamesend .game-intr {
    padding: 11px;
    width: 353px;
    left: 0;
    bottom: 25px;
    position: absolute;
    z-index: 2;
    color: #fff;
    text-align: left;
}

.daily-gamesend .game-intr h5 {
    font-size: 20px;
    margin-bottom: 4px;
    font-weight: bold
}

.daily-gamesend .game-intr p {
    color: #f1f1f1;
}

.daily-gamesend::after {
    content: '';
    background: url("../assets/images/white_mask.png") repeat-x;
    background-size: 50px 175px;
    width: 100%;
    position: absolute;
    bottom: -80px;
    left: 0;
    height: 175px;
    transform: scaleY(-1);
    z-index: 2;

}




.icon-hot,
.icon-new,
.icon-sf,
.icon-xf,
.icon-hd,
.icon-sd,
.icon-bsd {
    display: block;
    position: absolute;
    top: -2.5px;
    left: -3px;
    width: 33px;
    height: 33px;
}

.cf:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
}


.md-gamebox5 ul {
    display: flex;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    // justify-content: space-around;

}

ol,
ul,
li {
    list-style: none;
}

body,
html,
a,
img,
div,
form,
select,
input,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
dd,
dl,
dt,
p,
label,
em,
span,
cude,
i {
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: middle;
}

.md-gamebox5 {
    margin: 0 10px 15px;
}

.md-gamebox5 li {
    width: 62px;
    margin-bottom: 15px;
    text-align: left;
    float: left;
    margin-right: 35.5px;
}

@media screen and (min-width: 601px) {
    .md-gamebox5 li {
        width: 25%;
        text-align: center;
        margin-bottom: .2rem;
        margin-right: 0;
    }

    .md-gamebox li {
        width: 25%;
        text-align: center;
        margin-bottom: .2rem;
        margin-right: 0;
    }
}

.md-gamebox5 li a {
    position: relative;
    width: 62px;
    display: block;
    margin: 0 auto;
}

.md-gamebox5 li a img {
    width: 62px;
    height: 62px;
    display: block;
    border-radius: .16rem;
}


.icon-new {
    background: url("https://h.4399.com/images/2022/icon.png") no-repeat;
    background-size: 50px 1400px;
    background-position: 0 -654px;

}

img,
input {
    border: none;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.md-gamebox5 li:nth-child(4n) {
    margin-right: 0;
}


.md-list li span {
    height: 18px;
    line-height: 18px;
    color: #959595;
    font-size: 11px;
}

.md-list li p {
    height: 16px;
    line-height: 16px;
    padding-right: 75px;
    color: #959595;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.md-list li .btn {
    position: absolute;
    top: 13.5px;
    right: 0;
    width: 64px;
    height: 12px;
    line-height: 12px;
    padding: 8px 0;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #00cc7d;
    color: #00cc7d;
}

.md-list li em,
.md-list li span,
.md-list li p {
    display: block;
    margin-left: 65px;
}

.md-list li em {
    display: inline-block;
    margin-left: 10px;
    height: 18px;
    line-height: 18px;
    font-size: 14px;
    padding-right: 75px;
    margin-bottom: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



em,
i {
    font-style: normal;
    vertical-align: top;
}

.md-list li {
    position: relative;
    margin: 3px 0 15px;
    background: #fff;
    height: 55px;

    margin-bottom: 17px;
}

.list-head {
    padding: 5px 10px;
    margin-bottom: 0;
    background-color: #f5f5f5 !important;
    margin-bottom: 15px;
    height: 19px;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 15px;

}

.md-list li a:first-child {
    height: 55px;
}

.md-list li a {
    display: block;
    position: relative;
}

.md-list li img {
    float: left;
    width: 55px;
    height: 55px;
    border-radius: 12px;
}


.van-sticky--fixed {
    position: fixed;
    top: 80px;
    right: 0;
    left: 0;
    z-index: 99;
}

.md-header .search .url2,
.md-header .login a,
.md-feedback a,
.md-comment .comment-title p a,
.md-comment .comment-title .comment-url,
.comment-box .ft p i,
.md-search .txt,
.md-fixed p,
.md-fixed i,
.icon-hot,

.icon-sf,
.icon-xf,
.icon-hd,
.icon-sd,
.icon-bsd {
    background: url("https://h.4399.com/images/2022/icon.png") no-repeat;
    background-size: 50px 1400px;
}

a {
    color: #333;
    text-decoration: none;
    outline: none;
}

ol,
ul,
li {
    list-style: none;
}

body,
html,
a,
img,
div,
form,
select,
input,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
dd,
dl,
dt,
p,
label,
em,
span,
cude,
i {
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: middle;
}



.md-header-fixed {
    height: 100px;
    position: relative;
    overflow: hidden;


    margin: 0 auto;
}

.md-header {

    max-width: 500px;
    margin: 0 auto;
    position: fixed;
    top: 0;
    width: 100%;
    height: 30px;
    padding: 10px 0;
    background-color: #fff;
    overflow: hidden;
    z-index: 99;

    .logo {
        float: left;
        padding: 3.5px 0 3.5px 12px;

        img {
            height: 22px;
            display: block;
        }
    }

    .search {
        margin: 0 56px 0 142px;
        position: relative;

        .url1 {
            display: block;
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding-left: 14px;
            background-color: #f3f3f3;
            background-position: right -35px;
            border-radius: 15px;
            box-sizing: border-box;
            font-size: 13px;
            color: #959595;
        }

        .url2 {
            position: absolute;
            top: 5px;
            right: -5px;
            display: block;
            width: 35px;
            height: 30px;
            line-height: 250px;
            overflow: hidden;
            cursor: pointer;
            background-position: .50px .600px;
        }
    }

    .login {
        position: absolute;
        top: 10px;
        right: 12px;
        width: 30px;
        height: 30px;

    }
}

.md-header .login a {
    display: block;
    width: 30px;
    height: 30px;
    background-position: 0 -33px;
}

.md-nav {

    max-width: 500px;
    margin: 0 auto;
    padding: 0 10px;
    position: fixed;
    top: 50px;
    width: 100%;
    height: 50px;
    line-height: .8rem;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
    z-index: 99;

    a {
        float: left;
        width: 25%;
        text-align: center;
        font-size: 16px;
        position: relative;
    }

    .cur {
        color: #333333;
        font-weight: bold;

        &::after {
            position: absolute;
            bottom: 0px;
            left: 50%;
            margin-left: -8.5px;
            width: 17px;
            height: 4px;
            line-height: 0;
            font-size: 0;
            background: #00cc7d;
            border-radius: 2px;
            content: "";
        }
    }
}
</style>